<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>




	<link rel="stylesheet" href="./assets/mui/css/mui.min.css">
	<link rel="stylesheet" href="./css/base.css">


	<!-- 引入index.css -->

	<link rel="stylesheet" href="./css/index.css">
	<!-- 引入mui的js  -->
	<script src="./assets/mui/js/mui.min.js"></script>


	<style>


	</style>



</head>

<body>
	<header class="mui-bar mui-bar-nav  header">
		<!--  把返回按钮变成搜索按钮   -->
		<!-- mui-pull-left  表示css的左浮动 mui-pull-right 右浮动 -->
		<a class="mui-icon mui-icon-search  mui-pull-right"></a>
		<h1 class="mui-title">嗨淘云购首页</h1>
	</header>
	<nav class="mui-bar mui-bar-tab footer">
		<a class="mui-tab-item mui-active" href="./index.html">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="mui-tab-item" href="./category.html">
			<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
			<span class="mui-tab-label">分类</span>
		</a>
		<a class="mui-tab-item" href="./cart.html">
			<span class="mui-icon mui-icon-contact"></span>
			<span class="mui-tab-label">购物车</span>
		</a>
		<a class="mui-tab-item" href="./user.html">
			<span class="mui-icon mui-icon-gear"></span>
			<span class="mui-tab-label">会员中心</span>
		</a>
	</nav>


	<div class="mui-content">
		<div class='mui-scroll-wrapper'>
			<div class="mui-scroll">
				<!--这里放置真实显示的DOM内容-->


				<!-- 轮播图开始 -->
				<div class="mui-slider">
					<div class="mui-slider-group mui-slider-loop">
						<!--支持循环，需要重复图片节点-->
						<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img
									src="./images/banner4.png" /></a></div>
						<div class="mui-slider-item"><a href="#"><img src="./images/banner1.png" /></a></div>
						<div class="mui-slider-item"><a href="#"><img src="./images/banner2.png" /></a></div>
						<div class="mui-slider-item"><a href="#"><img src="./images/banner3.png" /></a></div>
						<div class="mui-slider-item"><a href="#"><img src="./images/banner4.png" /></a></div>
						<!--支持循环，需要重复图片节点-->
						<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img
									src="./images/banner1.png" /></a></div>
					</div>
				</div>
				<!-- 轮播图结束 -->
				<ul class="list_imgs">
					<li><img src="./images/nav1.png" alt=""></li>
					<li><img src="./images/nav2.png" alt=""></li>
					<li><img src="./images/nav3.png" alt=""></li>
					<li><img src="./images/nav4.png" alt=""></li>
					<li><img src="./images/nav5.png" alt=""></li>
					<li><img src="./images/nav6.png" alt=""></li>
				</ul>
				<div class="product_list">
					<h2><img src="./images/title0.png" alt=""></h2>
					<ul>
						<li><a href="#"><img src="./images/brand1.png" alt=""></a></li>
						<li><a href="#"><img src="./images/brand2.png" alt=""></a></li>
						<li><a href="#"><img src="./images/brand3.png" alt=""></a></li>
						<li><a href="#"><img src="./images/brand4.png" alt=""></a></li>
						<li><a href="#"><img src="./images/brand5.png" alt=""></a></li>
						<li><a href="#"><img src="./images/brand6.png" alt=""></a></li>
						<li><a href="#"><img src="./images/brand7.png" alt=""></a></li>
						<li><a href="#"><img src="./images/brand8.png" alt=""></a></li>
					</ul>


				</div>
				<div class="product_detail  first">
					<h2><img src="./images/title1.png" alt=""></h2>
					<ul>
						<li>
							<a href="">
									<img src="./images/product.jpg" alt="">
									<p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</p>
									<span>&yen;560</span>
									<span>&yen;888</span>
									
									<button>立即购买</button>
							</a>
						</li>
						<li>
								<a href="">
										<img src="./images/product.jpg" alt="">
										<p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</p>
										<span>&yen;560</span>
										<span>&yen;888</span>
										
										<button>立即购买</button>
								</a>
							</li>
							<li>
									<a href="">
											<img src="./images/product.jpg" alt="">
											<p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</p>
											<span>&yen;560</span>
											<span>&yen;888</span>
											
											<button>立即购买</button>
									</a>
								</li>
								<li>
										<a href="">
												<img src="./images/product.jpg" alt="">
												<p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</p>
												<span>&yen;560</span>
												<span>&yen;888</span>
												
												<button>立即购买</button>
										</a>
									</li>
							
						
					</ul>
				</div>
				<div class="product_detail  second">
						<h2><img src="./images/title2.png" alt=""></h2>
						<ul>
							<li>
								<a href="">
										<img src="./images/product.jpg" alt="">
										<p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</p>
										<span>&yen;560</span>
										<span>&yen;888</span>
										
										<button>立即购买</button>
								</a>
							</li>
							<li>
									<a href="">
											<img src="./images/product.jpg" alt="">
											<p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</p>
											<span>&yen;560</span>
											<span>&yen;888</span>
											
											<button>立即购买</button>
									</a>
								</li>
								<li>
										<a href="">
												<img src="./images/product.jpg" alt="">
												<p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</p>
												<span>&yen;560</span>
												<span>&yen;888</span>
												
												<button>立即购买</button>
										</a>
									</li>
									<li>
											<a href="">
													<img src="./images/product.jpg" alt="">
													<p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</p>
													<span>&yen;560</span>
													<span>&yen;888</span>
													
													<button>立即购买</button>
											</a>
										</li>
								
							
						</ul>
					</div>
					<div class="product_detail  three">
							<h2><img src="./images/title3.png" alt=""></h2>
							<ul>
								<li>
									<a href="">
											<img src="./images/product.jpg" alt="">
											<p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</p>
											<span>&yen;560</span>
											<span>&yen;888</span>
											
											<button>立即购买</button>
									</a>
								</li>
								<li>
										<a href="">
												<img src="./images/product.jpg" alt="">
												<p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</p>
												<span>&yen;560</span>
												<span>&yen;888</span>
												
												<button>立即购买</button>
										</a>
									</li>
									<li>
											<a href="">
													<img src="./images/product.jpg" alt="">
													<p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</p>
													<span>&yen;560</span>
													<span>&yen;888</span>
													
													<button>立即购买</button>
											</a>
										</li>
										<li>
												<a href="">
														<img src="./images/product.jpg" alt="">
														<p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</p>
														<span>&yen;560</span>
														<span>&yen;888</span>
														
														<button>立即购买</button>
												</a>
											</li>
									
								
							</ul>
						</div>

			</div>

		</div>

	</div>

	<script>
		window.onload = function () {
			//获得slider插件对象
			var gallery = mui('.mui-slider');
			gallery.slider({
				interval: 1000 //自动轮播周期，若为0则不自动播放，默认为0；
			});

			/*初始化区域滚动组件 当超过了父容器大小的时候生效*/
			mui('.mui-scroll-wrapper').scroll();


		}
	</script>
</body>

</html>